<template>
  <div id="product-shop">
    <div class="header">
      <img src="../../assets/product/shop/banner-font.png">
    </div>
    <div class="one section clearfix">
      <div class="title animate-left"></div>
      <div class="main animate-right">
        <systemComponent :system="system.one"></systemComponent>
        <systemComponent :system="system.two"></systemComponent>
        <systemComponent :system="system.three"></systemComponent>
        <systemComponent :system="system.four"></systemComponent>
      </div>
    </div>
    <div class="two section clearfix">
      <div class="title"></div>
      <div class="main animate-bottom">
      </div>
    </div>
    <div class="three section clearfix">
      <div class="title"></div>
      <div class="main animate-left">
      </div>
    </div>
    <div class="four section clearfix">
      <div class="title"></div>
      <div class="main animate-right">
      </div>
    </div>
    <div class="five section clearfix">
      <div class="title"></div>
      <div class="main animate-bottom">
      </div>
    </div>
    <div class="six section clearfix">
      <div class="title"></div>
      <div class="main animate-top">
      </div>
    </div>
  </div>
</template>
<script>
  import systemComponent from '@/components/product/system'
  import ScrollReveal from  'scrollreveal'
  export default{
    data () {
      return {
        system: {
          one: {src: require('@/assets/product/shop/system1.png'), title: 'B2B2C商城系统', desc: '商城、CMS、圈子、分销、产品库、聊天等多套系统'},
          two: {src: require('@/assets/product/shop/system2.png'), title: 'B2C商城系统', desc: 'PC商城、微信商城、移动商城'},
          three: {src: require('@/assets/product/shop/system3.png'), title: 'O2O商城系统', desc: '互联网线上和线下消费者结合的交易平台'},
          four: {src: require('@/assets/product/shop/system4.png'), title: '竞店分析', desc: '分析京东、淘宝竞争商品销量、价格等'}
        }
      }
    },
    created () {
      this.$nextTick(function () {
        window.sr = ScrollReveal()
        sr.reveal('.animate-left', { origin: 'left', distance: '200px', duration: 3000 })
        sr.reveal('.animate-bottom', { origin: 'bottom', distance: '200px', duration: 3000 })
        sr.reveal('.animate-top', { origin: 'top', distance: '200px', duration: 3000 });
        sr.reveal('.animate-right', { origin: 'right', distance: '200px', duration: 3000 });
        sr.reveal('.animate-3d', { origin: 'right', distance: '200px', duration: 1000, rotate: { x: 100, y: 200, z: 300 } });
      })
    },
    methods: {},
    components: {
      systemComponent
    }
  }
</script>
<style scoped>
  #product-shop{overflow: hidden}
  .section{padding: 60px 0; width: 100%;}
  .title{background-position: center center; background-repeat: no-repeat; height: 75px;}
  .header{background: url("../../assets/product/shop/bg.png") no-repeat center top; background-size: cover; background-attachment: fixed}
  .header img{ display: block; margin: 0 auto}
  .main{margin: 0 auto;  margin-top: 60px;background-position: center center; background-repeat: no-repeat;}
  .one{background-color: #fff;}
  .one .title{background-image: url("../../assets/product/shop/title1.png")}
  .two{background-image: url("../../assets/product/shop/bg2.png"); height: 680px;}
  .two .title{background-image: url("../../assets/product/shop/title2.png")}
  .two .main{background-image: url("../../assets/product/shop/bg2-font.png"); height: 488px}
  .three{background-color: #fff;}
  .three .title{background-image: url("../../assets/product/shop/title3.png")}
  .three .main{background-image: url("../../assets/product/shop/bg3-font.png"); height: 620px}
  .four{background-image: url("../../assets/product/shop/bg4.png"); height: 880px;}
  .four .title{background-image: url("../../assets/product/shop/title4.png")}
  .four .main{background-image: url("../../assets/product/shop/bg4-font.png"); height: 660px;}
  .five{background-image: url("../../assets/product/shop/bg5.jpg"); height: 1174px;}
  .five .title{background-image: url("../../assets/product/shop/title5.png")}
  .five .main{background-image: url("../../assets/product/shop/bg5-font.png"); height: 757px; max-width: 100%;}
  .six{background-color: #fff;}
  .six .title{background-image: url("../../assets/product/shop/title6.png")}
  .six .main{background-image: url("../../assets/product/shop/bg6-font.png"); height: 500px}
</style>
